<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./layui-v2.7.6/layui/css/layui.css">

  <script src="./js/jquery-3.5.1.min.js"></script>
  <title>首页</title>
  <style>

  </style>
</head>

<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md5" style="height:100px"></div>
    </div>
    <div class="layui-row">
      <div class="layui-col-md12">
        <span class="layui-breadcrumb">
          <a href="">首页</a>
          <a href="">新闻管理</a>
          <a href="">审核管理</a>
        </span>
      </div>
      <div class="layui-col-md12">
        <table id="bookInfo" lay-filter="bookInfo"></table>
      </div>
    </div>
  </div>


  <div class="layui-container" id="childform" style="display: none;">
    <div class="layui-row">
      <div class="layui-col-md5" style="height:20px"></div>
    </div>
    <div class="layui-row">
      <div class="layui-col-md10">
        <div class="layui-form" id="childform">
          <div class="layui-form-item">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-inline">
              <input type="text" id="sno" name="sno" autocomplete="off" class="layui-input" style="width:260px">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
              <input type="text" id="title" name="title" autocomplete="off" class="layui-input" style="width:260px">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-inline">
              <input type="text" id="content" name="content" autocomplete="off" class="layui-input" style="width:260px">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./layui-v2.7.6/layui/layui.js"></script>
<!-- 操作按钮 -->
<script type="text/html" id="rowTool">
  <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="update">修改</button>
  <button type="button" class="layui-btn layui-btn-sm" lay-event="check">审核</button>
  <button type="button" class="layui-btn layui-btn-sm" lay-event="back" class="back">归档</button>
</script>

<!-- 表头输入框 -->
<script type="text/html" id="thead">
<div class="layui-container">
  <div class="layui-row" style="height: 60px;">
    <div class="layui-col-md10">
    </div>
    编号:
    <div class="layui-inline" style="width:250px">
      <input class="layui-input" name="id" id="sno" autocomplete="off">
    </div>
    标题:
    <div class="layui-inline" style="width:250px">
      <input class="layui-input" name="id" id="title" autocomplete="off">
    </div>
    内容:
    <div class="layui-inline" style="width:250px">
      <input class="layui-input" name="id" id="content" autocomplete="off">
    </div>
  </div>
  <div class="layui-row" style="height: 50px;">
    <div class="layui-col-md10">
      审核状态:
      <div class="layui-inline" style="width: 235px;">
        <input name="" placeholder="请选择" class="layui-input" id="demo2">
      </div>
      <button type="button" class="layui-btn" lay-event="findData" data-type="reload">搜索</button>
    </div>
  </div>
</div>
<button type="button" lay-event="addData" class="layui-btn">新建</button>
</script>

<script>
  layui.use(function () {
    var table = layui.table;
    var $ = layui.$;
    var tyName, tyTemp, state, stateTemp, tableDatas = new Array();
    var dropdown = layui.dropdown;

    $.ajax({
      url: "json/newsInfo.json",
      method: "get",
      async: false,
      dataType: "json",
      success: function (rs) {
        tableDatas = rs;
      }
    });
    $.ajax({
      url: "json/newsType.json",
      method: "get",
      async: false,
      dataType: "json",
      success: function (rs) {
        tyName = rs;
      }
    });
    $.ajax({
      url: "json/newsState.json",
      method: "get",
      async: false,
      dataType: "json",
      success: function (rs) {
        state = rs;
      }
    });
    table.render({
      elem: '#bookInfo',
      height: 405,
      // url: "json/newsInfo.json",
      data: tableDatas,
      toolbar: "#thead",
      className:"tboty",
      cols: [[
        {
          field: 'newsNo', title: '新闻编号', sort: true
        },
        {
          field: 'title', title: '标题',
          templet: function (d) {
            $.each(tyName, function (i, n) {
              if (d.title == n.id) {
                tyTemp = n.typeName;
              }
            });
            return tyTemp;
          }
        },
        { field: 'content', title: '内容' },
        {
          field: 'state', title: '审核状态',
          templet: function (d) {
            $.each(state, function (i, n) {
              if (d.state == n.id) {
                stateTemp = n.name;
              }
            });
            return stateTemp;
          }
        },
        { title: '操作', templet: '#rowTool',}
      ]],
      parseData: function (res) { //res 即为原始返回的数据
        return {
          "code": 0,
          "count": res.length, //解析数据长度
          "data": res //解析数据列表
        };
      },
      page: {
        layout: ['count', 'prev', 'page', 'next', 'skip'],
        group: 4
      },
      limit: 4
    });
    //给表头按钮绑定事件
    table.on("toolbar(bookInfo)", function (obj) {
      switch (obj.event) {
        case "addData":
          layer.open({
            type: 2,          //类型为1时可以为html,和代码,为2时页面地址
            area: ["460px", "300px"],
            title: "新建文档",    //弹出层的标题
            btn: ['保存', '取消'],
            content: "child.html",
            btnAlign: 'l',
            //保存的回调
            yes: function (index, layero) {
              var body = layer.getChildFrame('body', index);//获取子页面内容
              var sno = body.contents().find("#sno").val();
              var title = body.contents().find("#title").val();
              var content = body.contents().find("#content").val();
              console.log(sno);
              console.log(title);
              console.log(content);
              // 如果有一项数据未填，则弹出提示框
              if (sno == '' || title == '' || content == '') {
                layer.open({
                  title: '<div style="color:red">错误</div>'
                  , content: '请填写每个数据'
                });
              } else {
                var newRow = { "newsNo": sno, "title": title, "content": content };
                //将新一行放入数组中
                tableDatas.push(newRow);
                //刷新表格数据
                table.reload("bookInfo", {
                  data: tableDatas
                });
                layer.open({
                  title: '<div style="color:#44ff00">完成</div>'
                  , content: '增加成功'
                });
                layer.close(index)
              }

              layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
            //取消的回调
            , btn2: function (index, layero) {
              console.log(index + "取消" + layero);
              layer.close(index);
            },
            resize: false
          });
          break;
      }
    });
    //给表操作按钮绑定事件
    table.on("tool(bookInfo)", function (obj) {
      switch (obj.event) {
        //修改
        case "update":
          layer.open({
            type: 2,          //类型为1时可以为html,和代码,为2时页面地址
            area: ["460px", "300px"],
            title: "修改档案",    //弹出层的标题
            btn: ['保存', '取消'],
            content: "child.html",
            btnAlign: 'l',
            success: function (layero, index) {
              var typeTemp;
              $.ajax({
                url: "json/newsType.json",
                method: "get",
                async: false,
                dataType: "json",
                success: function (rs) {
                  typeTemp = rs;
                }
              });
              // 获取子页面（iframe页）的body元素
              var body = layer.getChildFrame('body', index);
              var titleId = obj.data.title, titleText;
              //从父页面传值到子页面
              body.find('#sno').val(obj.data.newsNo);
              $.each(typeTemp, function (i, n) {
                if (n.id == titleId) {
                  titleText = n.typeName;
                }
              })
              body.find('#title').val(titleText);
              body.find('#content').val(obj.data.content);
            },

            //保存的回调
            yes: function (index, layero) {
              var typeTemp;
              $.ajax({
                url: "json/newsType.json",
                method: "get",
                async: false,
                dataType: "json",
                success: function (rs) {
                  typeTemp = rs;
                }
              });
              var body = layer.getChildFrame('body', index);

              var sno = body.contents().find("#sno").val();
              var title = body.contents().find("#title").val(), titleId;
              $.each(typeTemp, function (i, n) {
                if (title == n.typeName) {
                  titleId = n.id;
                }
              })
              var content = body.contents().find("#content").val();
              console.log(sno);
              console.log(title);
              console.log(content);
              // 如果有一项数据未填，则弹出提示框
              if (sno == '' || title == '' || content == '') {
                layer.open({
                  title: '<div style="color:red">错误</div>'
                  , content: '请填写每个数据'
                });
              } else {
                obj.update({
                  newsNo: sno,
                  title: titleId,
                  content: content
                });
                layer.open({
                  title: '<div style="color:#44ff00">完成</div>'
                  , content: '修改成功'
                });
                layer.close(index); //如果设定了yes回调，需进行手工关闭
              }
            },
            //取消的回调
            btn2: function (index, layero) {
              layer.close(index);
            },
            resize: false
          });
          break;
        //审核
        case "check":
          layer.open({
            type: 2,//类型为1时可以为html,和代码,为2时页面地址
            area: ["500px", "360px"],
            title: "审核档案",    //弹出层的标题
            btn: ['保存', '取消'],
            content: "childCheck.html",
            btnAlign: 'l',
            //保存的回调
            yes: function (index, layero) {
              var stateTemp, stateId;
              var body = layer.getChildFrame('body', index);
              var selectText = body.contents().find("#select option:selected")[0].innerHTML;
              console.log(selectText);
              $.ajax({
                url: "json/newsState.json",
                method: "get",
                async: false,
                dataType: "json",
                success: function (rs) {
                  stateTemp = rs;
                }
              });
              //需要在这里转换审核内容对应的编号，并传递给state
              $.each(stateTemp, function (i, n) {
                if (n.name == selectText) {
                  stateId = n.id;
                }
              })
              //更新数据
              obj.update({
                state: stateId
              });
              layer.open({
                title: '<div style="color:#44ff00">完成</div>'
                , content: '修改成功'
              });
              layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
            //取消的回调
            , btn2: function (index, layero) {
              console.log(index + "取消" + layero);
              layer.close(index);
            },
            resize: false
          });
          break;
        //归档
        case "back":
          
          console.log($(".back"));

          // $("#back")[0].innerHTML = "归档"

          break;

      }
    })
    dropdown.render({
      elem: '#demo2'
      , data: [{
        title: '草稿'
        , id: 101
      }, {
        title: '审核通过'
        , id: 102
      }, {
        title: '审核驳回'
        , id: 103
      }, {
        title: '归档'
        , id: 104
      }]
      , click: function (obj) {
        this.elem.val(obj.title);
      }
      , style: 'width: 235px;'
    });


  });




</script>

</html>